<template>
  <div :style="topStyle">
    <a-card :bordered="false">
      <div v-if="isShow">
        <!-- :rowKey="OrderDataSource => OrderDataSource.key" 开通数据的清单列表-->

        <a-table
          :columns="columnstableKAITONG"
          :data-source="dataKAITONG"
          bordered
          size="middle"
          rowKey="id"
          style="margin: 20px 10% 0 10%"
          :pagination="false"
        >
          <template slot="file" slot-scope="text, record">
            <SelectFile
              :includeFileName="record.desc"
              :id="record.id"
              @fileListChange="fileListChange"
              @resultChange="resultChange"
            ></SelectFile>
          </template>
          <template slot="action" slot-scope="text, record">
            <UpoadFile
              @resultChange="resultChange"
              :uploadIsOk="record.uploadIsOk"
              :id="record.id"
              :url="record.url"
              :fileList="record.fileList"
              :btninfo="record"
              @btnChange="btnChange"
            ></UpoadFile>
          </template>
          <template slot="template" slot-scope="text, record">
            <a :href="record.downurl" :download="record.downurl">点击下载</a>
          </template>
        </a-table>
        <UploadFileAll
          style="margin: 20px 10% 0 10%;float:right"
          @resultChange="resultChange"
          @btnloading="btnloading"
          :info="dataKAITONG"
        ></UploadFileAll>
        <a-button type="primary" style="width:10%;margin:20px 45%" @click="daoru">查看总报表</a-button>
        <div style="height:1000px"></div>
      </div>
      <!-- //页面总报表 -->
      <div style="margin: 5px 10px" v-else>
        <div class="table-page-search-wrapper">
          <a-button shape="round" type="primary" @click="comeBack">返回</a-button>
          <a-form layout="inline" class="formModel" style="margin-top:15px">
            <a-row :gutter="48">
              <a-col :md="4" :sm="24">
                <a-form-item label="姓名">
                  <a-input v-model="queryParam.userName" placeholder="" />
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="24">
                <a-form-item label="工号">
                  <a-input v-model="queryParam.bopNo" placeholder="" />
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="24">
                <a-form-item label="电话">
                  <a-input v-model="queryParam.mobile" placeholder="" />
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="24">
                <a-button type="primary" icon="search" @click="searchFirst">查询</a-button>
              </a-col>
              <a-col :md="4" :sm="24"> </a-col>
              <a-col :md="4" :sm="24" style="text-align:right"> </a-col>
            </a-row>
          </a-form>
        </div>
        <!-- 表格 -->
        <a-table
          :loading="tableLoading"
          :columns="columnstableFirstNext"
          :data-source="dataFirstNext"
          bordered
          size="middle"
          :pagination="pagination"
          @change="pageShow"
        >
          <template slot="action" slot-scope="text, record">
            <a>
              <div @click="modify(record)">编辑</div>
            </a>
          </template>
        </a-table>

        <!-- <编辑> -->
        <ModifyAccount
          v-bind:form="form"
          v-if="addShow"
          @cancelEvent="cancelEvent"
          @successEvent="successEvent"
        ></ModifyAccount>
      </div>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import { getAccountPages } from '@/api/public'
import { getNowFormatDate } from '@/utils/util.js'
import Vue from 'vue'
import ModifyAccount from '@/views/systemManage/modifyAccount'
import SelectFile from '@/views/systemManage/uploadFile/selectFile'
import UpoadFile from '@/views/systemManage/uploadFile/upoadFile'
import UploadFileAll from '@/views/systemManage/uploadFile/uploadFileAll'
export default {
  name: 'TableList',
  components: { ModifyAccount, SelectFile, UpoadFile, UploadFileAll },
  data() {
    this.columns = columns
    return {
      tableLoading: false,
      addShow: false,
      queryParam: {},
      topStyle: {},
      qingdanlist: [],
      firstLoading: false,
      secondLoading: false,
      startTime: '',
      endTime: '',
      dateFormat: 'YYYY-MM-DD',
      fileList: '',
      analisyType: false,
      linshiId: '', //记录修改得某行清单id
      isShow: true,
      readDetailInfo: false, //二级页面（一级详情）
      daochuIs: false,
      headers: {
        authorization: Vue.ls.get('ACCESS_TOKEN')
      },
      columnstableERJI,
      columnstableYIJI,
      columnstable,
      columnstableKAITONG, //KT
      columnstableFirst,
      columnstableFirstNext: [
        {
          title: '序号',
          dataIndex: 'idNo',
          key: 'idNo',
          width: 80,
          align: 'center'
        },
        {
          title: 'BOP工号',
          dataIndex: 'bopNo',
          key: 'bopNo',
          width: 80,
          align: 'center'
        },
        {
          title: '归属',
          dataIndex: 'area',
          key: 'area',
          width: 80,
          align: 'center'
        },
        {
          title: '员工姓名',
          dataIndex: 'name',
          key: 'name',
          width: 80,
          align: 'center'
        },
        {
          title: '人员类型',
          dataIndex: 'staffType',
          key: 'staffType',
          width: 80,
          align: 'center'
        },
        {
          title: '类型',
          dataIndex: 'type',
          key: 'type',
          width: 80,
          align: 'center'
        },
        {
          title: '归属网格名',
          dataIndex: 'grid',
          key: 'grid',
          width: 80,
          align: 'center'
        },
        {
          title: '归属网格编码',
          dataIndex: 'gridType',
          key: 'gridType',
          width: 80,
          align: 'center'
        },

        {
          title: '电话号码',
          dataIndex: 'mobile',
          key: 'mobile',
          width: 80,
          align: 'center'
        },
        {
          title: '备注',
          dataIndex: 'remark',
          key: 'remark',
          width: 80,
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      data,
      dataFirst: [],
      dataFirstNext: [],
      dataKAITONG: [],
      searchData: [],
      visible: false,
      confirmLoading: false,
      mdl: null,
      advanced: false,
      queryParam: {},
      selectedRowKeys: [],
      selectedRows: [],
      uidList: [],
      pagination: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      current: 1,
      pageSize: 10
    }
  },
  filters: {
    statusFilter(type) {
      return statusMap[type].text
    },
    statusTypeFilter(type) {
      return statusMap[type].status
    }
  },
  mounted() {},
  created() {
    this.startTime = getNowFormatDate()
    this.endTime = getNowFormatDate()
    this.initdataKAITONG()
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  },
  methods: {
    moment,
    //上传结果按钮状态改变
    btnloading(id) {
      this.dataKAITONG[id].loading = true
    },
    //按钮状态改变
    btnChange(id) {
      this.dataKAITONG[id].loading = true
    },
    //编辑客经信息
    modify(record) {
      this.form = JSON.parse(JSON.stringify(record))
      this.addShow = true
    },
    cancelEvent() {
      this.addShow = false
    },
    successEvent() {
      this.getFirstData()
      this.addShow = false
    },
    //查询
    searchFirst() {
      this.getFirstData()
    },
    ////获取客经数据
    getFirstData() {
      this.tableLoading = true
      getAccountPages(
        this.current,
        this.pageSize,
        this.queryParam.userName,
        this.queryParam.mobile,
        this.queryParam.bopNo
      )
        .then(response => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.dataFirstNext = response.data.records
          if (this.dataFirstNext.length == 0) {
            this.topStyle.height = 80 + 'vh'
          }
          this.tableLoading = false
        })
        .catch(error => {
          this.tableLoading = false
        })
    },
    pageShow(pagination) {
      this.tableLoading = true
      getAccountPages(
        pagination.current,
        pagination.pageSize,
        this.queryParam.userName,
        this.queryParam.mobile,
        this.queryParam.bopNo
      )
        .then(response => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.dataFirstNext = response.data.records
          this.tableLoading = false
        })
        .catch(error => {
          this.tableLoading = false
        })
    },
    daoru() {
      this.isShow = false
      this.queryParam.userName = ''
      this.queryParam.mobile = ''
      this.queryParam.bopNo = ''
      this.getFirstData()
    },
    //上传文件
    fileListChange(fileList, result, id) {
      result == '文件名称错误' ? (this.dataKAITONG[id].uploadIsOk = true) : (this.dataKAITONG[id].uploadIsOk = false)
      this.dataKAITONG[id].fileList = fileList
      this.dataKAITONG[id].status = result
    },
    //删除结果改变
    resultChange(data, id) {
      this.dataKAITONG[id].status = data
      this.dataKAITONG[id].fileList = []
      this.dataKAITONG[id].uploadIsOk = true
      this.dataKAITONG[id].loading = false
    },
    ///---------------------------------------------------------------------------

    daoru() {
      this.isShow = false
      this.startTime = getNowFormatDate()
      this.endTime = getNowFormatDate()
      this.getFirstData()
    },
    //初始化清单列表数据
    initdataKAITONG() {
      this.dataKAITONG = [
        {
          id: 0,
          name: '客经联系清单',
          url: '/api/import/manage/kqjd',
          fileList: [],
          status: '未上传',
          desc: '客户经理',
          rule: 'xx客户经理xx.xlsx',
          uploadIsOk: false,
          loading: false,
          downurl:'http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/excel/%E8%B4%A6%E6%88%B7%E6%A8%A1%E6%9D%BF.xlsx'
        }
      ]
    },
    callback() {},

    comeBack() {
      this.isShow = true
      this.initdataKAITONG()
    },
    daocru() {
      this.isShow = false
    }
  }
}

const columnstableKAITONG = [
  {
    title: '报表类型', //Excel清单名称
    dataIndex: 'name',
    key: 'name',
    width: 50,
    align: 'center',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '命名规则',
    dataIndex: 'rule',
    key: 'rule',
    width: 50,
    align: 'center'
  },
  {
    title: '上传操作',
    dataIndex: 'file',
    key: 'file',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'file' }
  },
  {
    title: '上传结果',
    dataIndex: 'status',
    key: 'status',
    width: 50,
    align: 'center',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '模板下载',
    dataIndex: 'template',
    key: 'template',
    width: 50,
    align: 'center',
    scopedSlots: { customRender: 'template' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 50,
    ellipsis: true,
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]

const columnstable = []
const columnstableERJI = []
const columnstableYIJI = []
const columnstableFirst = []
const data = []
const columns = []
</script>
